<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--导入L7的依赖-->
    <script src='https://unpkg.com/@antv/l7'></script>
    <style>
        #map {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }
    </style>
</head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<body>
    <button style="z-index: 999;
position: relative;" onclick="fddt()">放大地图</button>
    <button style="z-index: 999;
position: relative;" onclick="fddt1()">缩小地图</button>
    <div id="map"></div>

</body>
<script>

    console.log("111")
    //实例化场景
    const scene = new L7.Scene({
        //通过id挂载到DOM树
        id: "map",
        map: new L7.GaodeMap({
            style: 'dark',
            center: [114.30, 30.50],
            zoom: 11,
            //视角0-90
            pitch: 90
        }),
        logoVisible: false

    })
    scene.on('loaded', () => {
        const mapTheme = new L7.MapTheme({});
        scene.addControl(mapTheme)
    })
    scene.on('loaded', () => {
        scene.on("click", () => {
            // scene.setMapStyle("normal")
        })
    })
    function fddt() {
        let zoom = scene.getZoom();
        scene.setZoom(zoom + 1)
    }
    function fddt1() {
        let zoom = scene.getZoom();
        scene.setZoom(zoom - 1)

    }



    // //轨迹动画
    var data3 = {
        "type": "FeatureCollection",
        "features": [
            {
                type: "Feature",
                "geometry": {
                    "type": "LineString",
                    "coordinates": [
                        [114.292975, 30.488542],
                        [90, 30]
                    ]
                }
            }
        ]

    }
    scene.addImage(
        'plane',
        'https://gw.alipayobjects.com/zos/bmw-prod/0ca1668e-38c2-4010-8568-b57cb33839b9.svg'
    );
    scene.on('loaded', () => {

        $.ajax({
            url: "./fly_path.json"
        }).then(res => {
            console.log(res)
            const layer = new L7.LineLayer({
                blend: "normal",
                name: "飞机"
            }).source(res).shape("arc").size(2).color("#ff6b34");
            const planeLineLayer = new L7.LineLayer({
                blend: 'normal',
                name: "飞机"
            })
                .source(res)
                .color('#ff6b34').texture('plane')
                .shape('arc')
                .size(15)
                .animate({
                    duration: 1,
                    interval: 0.2,
                    trailLength: 0.05
                })
                .style({
                    textureBlend: 'replace',
                    lineTexture: true, // 开启线的贴图功能
                    iconStep: 10, // 设置贴图纹理的间距
                });
            scene.addLayer(layer)
            scene.addLayer(planeLineLayer)
        })
    })
        // const layer = new L7.LineLayer({
        //     blend: "normal"
        // }).source(data3).shape("arc").size(2).color('#ff2d51')
        // scene.addLayer(layer)
        // const planeLineLayer = new L7.LineLayer({
        //     blend: 'normal',
        //     name: "飞机"
        // })
        //     .source(data3)
        //     .color('#ff6b34')
        //     .texture('plane')
        //     .shape('arc')
        //     .size(15)
        //     .animate({
        //         duration: 1,
        //         interval: 0.2,
        //         trailLength: 0.05
        //     })
        //     .style({
        //         textureBlend: 'replace',
        //         lineTexture: true, // 开启线的贴图功能
        //         iconStep: 10, // 设置贴图纹理的间距
        //     });
        // scene.addLayer(planeLineLayer);


    scene.on('loaded', () => {
        const point_layer = new L7.PointLayer();
        const weather_icon = [
            {
                type: "0-天晴",
                url: "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*kzTMQqS2QdUAAAAAAAAAAABkARQnAQ"
            }, {
                type: "1-多云",
                url: "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*jH1XRb7F7hMAAAAAAAAAAABkARQnAQ"
            },
            {
                type: "2-小雨",
                url: "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DccRTI6ZRLoAAAAAAAAAAABkARQnAQ"
            },
            {
                type: "3-中雨",
                url: "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*f-wyS7ad5p0AAAAAAAAAAABkARQnAQ"
            },
            {
                type: "4-大雨",
                url: "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YaKSTr3L5i8AAAAAAAAAAABkARQnAQ"
            }
            ,
            {
                type: "5-雷阵雨",
                url: "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*LyuVRowl6nAAAAAAAAAAAABkARQnAQ"
            },
            {
                type: "6-中雪",
                url: "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*iQKoS6I-rO8AAAAAAAAAAABkARQnAQ"
            },
            {
                type: "7-大雪",
                url: "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*9Q0QS4GdaYcAAAAAAAAAAABkARQnAQ"
            }
        ]
        weather_icon.forEach((el, index) => {
            scene.addImage(`${index}`, el.url)
        })
        $.ajax({
            url: "./fly_end.json"
        }).then(res => {
            console.log(res)
            point_layer.source(res).shape("weather", ww => {
                return ww
            }).size(20)
            scene.addLayer(point_layer)
        })
    })
    scene.on("loaded", () => {
        const WindLayer = new L7.WindLayer({
            name: "风场"
        }).source('https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*wcU8S5xMEDYAAAAAAAAAAAAAARQnAQ', {
            parser: {
                type: "image",
                extent: [-180, -85, 180, 85]
            }
        }).animate(true).style({
            numParticles: 35535,
            fadeOpacity: 0.9,
            sizeScale: 1.3,
            rampColors: {
                0.0: '#3288bd',
                0.1: '#66c2a5',
                0.2: '#abdda4',
                0.3: '#e6f598',
                0.4: '#fee08b',
                0.5: '#fdae61',
                0.6: '#f46d43',
                1.0: '#d53e4f'
            }

        })
        scene.addLayer(WindLayer)
    })
    scene.on("loaded",()=>{
        let rain="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*w2SFSZJp4nIAAAAAAAAAAAAAARQnAQ"
        const layer=new L7.GeometryLayer({
            name:"暴雨点"
        }).shape('sprite').size(10).style({
            opacity:0.3,
            mapTexture:rain,
            center: [105.318756, 61.52401],
      spriteCount: 12000,
      spriteRadius: 10,
      spriteTop: 2500000,
      spriteUpdate: 20000,
      spriteScale: 0.6
        })
        scene.addLayer(layer)
    })
    
</script>

</html>